<template>
    <div class="addArticle">
        <div>
            <el-form label-width="100px">
                <el-form-item label="图片展示：" prop="region" class="msTop">
                    <img class="imgSize" :src="articleObj.picture">
                </el-form-item>
                <el-form-item :label=" '上传图片'" class="msTop">
                    <el-upload
                            class="upload-demo"
                            action="http://39.106.171.39:8011/mbl/FileController/uploadFile"
                            ref="newsUpload"
                            :on-change="handleFileChange"
                            :file-list="teacherFileList"
                            :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" :loading="fileLoading">上传到服务器</el-button>
                        <!--          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                    </el-upload>
                </el-form-item>
                <el-form-item label="作者" prop="pass">
                    <el-col :span="20">
                        <el-input type="text" v-model="articleObj.author"></el-input>
                    </el-col>
                </el-form-item>
                <!-- <el-form-item label="文章id" prop="pass">
                     <el-col :span="20">
                         <el-input type="text" v-model="articleList.articleid"></el-input>
                     </el-col>
                 </el-form-item>-->
                <el-form-item label="标题" prop="pass">
                    <el-col :span="20">
                        <el-input type="text" v-model="articleObj.title"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="出版时间" prop="pass">
                    <el-col :span="20">
                        <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择出版时间" v-model="articleObj.publishdate" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="DOI" prop="pass">
                    <el-col :span="20">
                        <el-input type="text" v-model="articleObj.doi"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="概要" prop="pass">
                    <el-col :span="20">
                        <el-input type="textarea" v-model="articleObj.summary"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addArticle">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import { uploadFile,addTeacherArticle } from '@/api/memberManage'
    export default {
        name: "addArticle",
        props:['articleInfo'],
        data(){
            return{
                teacherId: this.articleInfo,
                fileLoading: false,
                successImagUrl: '',
                teacherFileList: [],
                articleObj:{
                    /*id: '',*/
                    /*articleid: '',*/
                    title: '',
                    author: '',
                    journalname: '',
                    doi: '',
                    publishdate: '',
                    summary: '',
                    picture: '',
                },
                articleList: [],
            }
        },
        methods:{
            async addArticle(){
                try {
                    console.log(this.teacherId)
                    const res = await addTeacherArticle({
                        teacherid: this.teacherId,
                        /*articleList: [this.articleObj]*/
                        articleList: ['0000000006']
                    })
                    console.log(res)
                    this.$message({
                        type: 'success',
                        message: '成功'
                    })
                    this.$emit('closeDialog')

                } catch (e) {
                    console.log(new Error(e))
                }
            },

            handleFileChange(file, FileList){
                this.teacherFileList = FileList
            },
            async submitUpload(){
                let formData = new FormData()
                formData.append('file', this.teacherFileList[0].raw)
                // this.newsFileList.forEach(function (file) {
                //   formData.append("file", file.raw, file.name);
                // })
                this.fileLoading = true
                const res = await uploadFile(formData)
                this.successImagUrl = res.message
                this.$message({
                    type: 'success',
                    message: '上传成功'
                })
                this.fileLoading = false
            },
        }
    }
</script>

<style lang="scss" scoped>
    .addArticle{
        .msTop{
            .imgSize{
                width: 50px;
                height: 50px;
            }
        }
        /deep/ .el-form-item {
            margin-bottom: 15px;
        }
        /deep/ .el-form-item__label {
            font-size: 14px;
        }
        /deep/ .el-input__inner, .el-textarea__inner, .textarea__inner {
            font-size: 12px;
        }
        .upload, .submit{
            font-size: 16px;
            background: #cccccc;
            height: 35px;
            width: 70px;
        }

        /deep/ .el-button--medium {
            font-size: 12px;
            /*margin-left: 10px;*/
        }

    }
</style>
